{% extends 'layouts/blank.html' %}

{% block content %}
<div class="flex flex-col md:flex-row md:justify-end">
    <div class="w-full! md:w-72! lg:w-72! px-4 pt-2">
      {% include 'includes/settings_sidebar.html' with page='account_settings' %}
    </div>
    <div class="flex w-full justify-start items-center py-2 px-3 md:px-8">
        <div class="rounded-md w-full min-[1200px]:w-3xl! md:ml-10 min-[1600px]:ml-40! px-4 py-4 md:pb-8 border
                    bg-slate-100 dark:bg-slate-800 creme:bg-creme-dark-light
                    border-slate-300 dark:border-slate-700 creme:border-creme-dark">
            <span class="text-2xl font-bold">Account Information</span>
            <div class="flex flex-row items-center gap-x-2 pt-2">
                <div class="flex items-center justify-center px-2 mt-1 rounded-full aspect-square cursor-default
                            border-4 border-primary text-primary">
                    <span class="text-lg font-extrabold!">{{ request.user.email.capitalize|first }}</span>
                </div>
                <div class="flex flex-col truncate [&>span]:text-sm">
                    <span class="truncate">{{ request.user.email }}</span>
                    <span>User ID: {{ user.id }}</span>
                </div>
            </div>
            {% if not uses_social %}
            <div class="pt-4">
                <span class="text-lg font-bold">Email Address</span>
            </div>
            <div class="flex justify-between text-slate-600 dark:text-slate-400 creme:text-stone-500">
                <div class="w-5/6">
                    <span id="email_address">{{ user.email }}</span>
                    <div>
                        {% if user.emailaddress_set.first.verified %}
                        <span class="text-primary text-sm">Verified</span>
                        {% else %}
                        <span class="text-amber-500 text-sm">Not verified</span>
                        {% endif %}
                    </div>
                </div>
                <div class="pr-0 md:pr-6">
                    <a id="email_edit" class="cursor-pointer text-primary hover:text-secondary"
                        hx-get="{% url 'profile-setting-change' 'email' %}"
                        hx-target="#email_address"
                        hx-swap="innerHTML" >
                        Edit
                    </a>
                </div>
            </div>
            <div class="pt-3">
                <span  class="text-lg font-bold">Password</span>
            </div>
            <div class="flex justify-between text-slate-600 dark:text-slate-400 creme:text-stone-500">
                <div>
                    <span>***</span>
                </div>
                <div class="pr-0 md:pr-6">
                    <a href="{% url 'account_change_password' %}" class="cursor-pointer text-primary hover:text-secondary">
                        Edit
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
